<template>
	<view class="container">
		<!-- 视频预览区域 -->
		<view
			class=""
			style="
				position: relative;
				height: 100vh;
				margin-top: 300rpx;
				box-sizing: border-box;
				display: flex;
				flex-direction: column;
				align-items: center;
			"
			v-if="showcamera"
		>
			<view
				class=""
				style="margin-bottom: 30rpx; text-align: center; color: red"
			>
				请确保环境明亮，面部无遮挡物
			</view>
			<view
				class=""
				style="margin-bottom: 30rpx; text-align: center; color: red"
			>
				请眨眨眼
			</view>
			<camera id="camera" device-position="front" flash="off"></camera>
		</view>
		<view class="authentication-content" v-else>
			<view class="title"> 尊敬的用户： </view>
			<view class="content">
				为了更好的向您提供服务，本服务的功能由第三方服务提供方提供核验数据及技术支持。我们会要求第三方服务提供方以不低于我们的安全水准使用和存储您的信息，并要求第三方服务提供者承诺尽到信息安全保护义务。
			</view>
			<view class="Information" style="margin-bottom: 32rpx">
				<image
					src="../../static/person.png"
					style="
						width: 42rpx;
						height: 42rpx;
						padding: 9rpx;
						margin-right: 24rpx;
					"
					mode=""
				></image>
				<input
					class="uni-input"
					v-model="name"
					placeholder="输入姓名"
				/>
			</view>
			<view class="Information" style="margin-bottom: 68rpx">
				<image
					src="../../static/idcard.png"
					style="width: 60rpx; height: 60rpx; margin-right: 24rpx"
					mode=""
				></image>
				<input
					class="uni-input"
					v-model="cardId"
					type="idcard"
					placeholder="点击输入有效身份证号码"
				/>
			</view>
			<view class="button" @click="check"> 开始实名认证 </view>
			<view
				class=""
				style="
					margin: 24rpx auto;
					text-align: center;
					font-size: 24rpx;
					color: #bbbbbb;
				"
			>
				即将进行人脸识别，请按照提示完成相应的动作
			</view>
			<view
				class=""
				style="
					margin: 24rpx auto;
					text-align: center;
					font-size: 24rpx;
					color: #bbbbbb;
				"
			>
				请确保环境明亮，面部无遮挡物
			</view>
		</view>
	</view>
</template>

<script>
	import { http } from '@/utils/http.js'
	import { useUsercodeStore } from '@/store/usercode.js'

	export default {
		data() {
			return {
				cameraContext: null,
				videoToken: '',
				url: '',
				showcamera: false,
				name: '',
				cardId: '',
				videoUrl: '',
			}
		},
		onReady() {
			// 初始化摄像头上下文
			this.cameraContext = uni.createCameraContext()
		},
		methods: {
			check() {
				const userCodeStore = useUsercodeStore()
				if (!userCodeStore.usercode.token) {
					uni.utils.toast('请先登录')
					setTimeout(() => {
						uni.navigateTo({
							url: `/pages/login/login`,
						})
					}, 2000)
				} else if (!this.name || !this.cardId) {
					uni.utils.toast('请输入姓名和身份证号')
				} else {
					this.goVideo()
				}
			},
			goVideo() {
				this.showcamera = true
				// 自动开始录制视频
				this.startRecording()
			},
			startRecording() {
				this.cameraContext.startRecord({
					timeout: 2000,
					success: (res) => {
						console.log('开始录制视频')
						// 你可以在这里添加定时器或逻辑来自动停止录制
						setTimeout(() => {
							this.stopRecording()
						}, 2000) // 2秒后自动停止
					},
					fail: (err) => {
						this.startRecording()
						console.error('录制视频失败', err)
					},
				})
			},
			stopRecording() {
				this.cameraContext.stopRecord({
					success: async (res) => {
						console.log('录制完成，文件路径：', res.tempVideoPath)
						this.showcamera = false
						// 在这里可以处理视频文件，例如上传到服务器或保存到本地
						// 七牛云
						const res1 = await http.request({
							url: '/api/config/qiUpload',
							method: 'POST',
							data: {},
						})
						console.log(res1)
						this.videoToken = res1.data.uptoken
						this.url = res1.data.domain

						uni.uploadFile({
							url: 'https://upload-z0.qiniup.com/',
							filePath: res.tempVideoPath, //头像文件
							header: {},
							formData: {
								token: this.videoToken,
							},
							name: 'file',
							success: async (uploadFileRes) => {
								console.log('zhong')
								console.log(uploadFileRes.data)
								this.videoUrl =
									this.url +
									JSON.parse(uploadFileRes.data).key
								const res2 = await http.request({
									url: '/api/face/facexcx/facePost',
									method: 'POST',
									data: {
										name: this.name,
										idcard: this.cardId,
										url: this.videoUrl,
									},
								})
								console.log(res2)
								if (res2.st == 1) {
									uni.utils.toast(res2.msg)
									setTimeout(() => {
										uni.navigateTo({
											url: `/minePage/authenticationsuccess/index`,
										})
									}, 2000)
								} else {
									uni.utils.toast(res2.msg)
								}
							},
						})
					},
					fail: (err) => {
						console.error('停止录制失败', err)
					},
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100vh;
		.authentication-content {
			padding: 52rpx 44rpx;
			.title {
				margin-bottom: 30rpx;
				font-size: 28rpx;
				font-weight: 700;
			}
			.content {
				margin-bottom: 46rpx;
				font-size: 28rpx;
				color: #9b9b9d;
			}
			.Information {
				display: flex;
				align-items: center;
				.uni-input {
					height: 80rpx;
					padding: 20rpx;
					width: 100%;
					box-sizing: border-box;
					border-radius: 12rpx;
					background-color: #f6f6f6;
					font-size: 28rpx;
					line-height: 80rpx;
				}
			}
			.button {
				width: 380rpx;
				height: 84rpx;
				margin: 0 auto;
				border-radius: 42rpx;
				background-color: $all-color;
				line-height: 84rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 700;
				color: #fff;
			}
		}
	}
	camera {
		width: 420rpx;
		height: 420rpx;
		border-radius: 50%;
	}
</style>
